import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import styled, { keyframes } from 'styled-components';

// 动画效果
const fadeIn = keyframes`
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
`;

const slideIn = keyframes`
  from { transform: translateX(-20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
`;

const Container = styled.div`
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
`;

const Card = styled.div`
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  width: 420px;
//   max-width: 420px;
  overflow: hidden;
  animation: ${fadeIn} 0.6s ease-out forwards;
  
  @media (max-width: 480px) {
    max-width: 90%;
  }
`;

const CardHeader = styled.div`
  padding: 2.5rem 3rem;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  
  h2 {
    font-size: 1.75rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
  }
`;

const CardBody = styled.div`
  padding: 3rem;
`;

const FormGroup = styled.div<{ delay?: number }>`
  margin-bottom: 1.5rem;
  animation: ${slideIn} 0.4s ease-out forwards;
  animation-delay: ${props => props.delay || 0}s;
  
  label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #4b5563;
    margin-bottom: 0.5rem;
  }
  
  input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    
    &:focus {
      outline: none;
      border-color: #6366f1;
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
    }
    
    &::placeholder {
      color: #9ca3af;
    }
  }
  
  .error-message {
    color: #ef4444;
    font-size: 0.875rem;
    margin-top: 0.25rem;
  }
`;

const Button = styled.button`
  width: 100%;
  padding: 0.75rem 1rem;
  background: #6366f1;
  color: white;
  font-size: 1rem;
  font-weight: 500;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
  box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.4);
  
  &:hover {
    background: #585cf6;
  }
  
  &:active {
    transform: translateY(1px);
  }
  
  &:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
  }
  
  &:disabled {
    background: #a8abfa;
    cursor: not-allowed;
  }
`;

const ForgotPasswordLink = styled.p`
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.875rem;
  
  a {
    color: #6366f1;
    text-decoration: none;
    transition: color 0.2s;
    
    &:hover {
      color: #4f46e5;
      text-decoration: underline;
    }
  }
`;

const Divider = styled.div`
  display: flex;
  align-items: center;
  margin: 2rem 0;
  
  &::before, &::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
  }
  
  span {
    padding: 0 1rem;
    font-size: 0.875rem;
    color: #9ca3af;
  }
`;

const SocialButton = styled.button`
  width: 100%;
  padding: 0.75rem 1rem;
  background: white;
  color: #4b5563;
  font-size: 1rem;
  font-weight: 500;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  
  svg {
    margin-right: 0.75rem;
  }
  
  &:hover {
    background: #f9fafb;
  }
  
  &:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
  }
`;

// const RegisterLink = styled.p`
//   text-align: center;
//   margin-top: 1.5rem;
//   font-size: 0.875rem;
  
//   a {
//     color: #6366f1;
//     font-weight: 500;
//     text-decoration: none;
//     transition: color 0.2s;
    
//     &:hover {
//       color: #4f46e5;
//       text-decoration: underline;
//     }
//   }
// `;

const LoginPage = () => {

    const navigator = useNavigate();
    const [formData, setFormData] = useState({
        email: '',
        password: ''
    });

    const [errors, setErrors] = useState({});
    const [isLoading, setIsLoading] = useState(false);

    const handleChange = (e: { target: { name: string; value: string; }; }) => {
        const { name, value } = e.target;
        setFormData({ ...formData, [name]: value });

        // 清除输入时的错误提示
        // 由于 errors 类型未明确，这里将其类型定义为 Record<string, string>，确保可以使用 name 作为索引
        if ((errors as Record<string, string>)[name]) {
            setErrors({ ...errors, [name]: '' });
        }
    };

    const validateForm = () => {
        const newErrors = {};
        let isValid = true;

        if (!formData.email.trim()) {
            // 明确 newErrors 的类型为 Record<string, string>，解决类型错误
            const newErrorsTyped: Record<string, string> = newErrors as Record<string, string>;
            newErrorsTyped.email = '请输入邮箱';
            isValid = false;
        } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
            // 明确 newErrors 的类型为 Record<string, string>，解决类型错误
            const newErrorsTyped: Record<string, string> = newErrors as Record<string, string>;
            newErrorsTyped.email = '请输入有效的邮箱地址';
            isValid = false;
        }

        if (!formData.password.trim()) {
            // 明确 newErrors 的类型为 Record<string, string>，解决类型错误
            const newErrorsTyped: Record<string, string> = newErrors as Record<string, string>;
            newErrorsTyped.password = '请输入密码';
            isValid = false;
        } else if (formData.password.length < 6) {
            // 明确 newErrors 的类型为 Record<string, string>，解决类型错误
            const newErrorsTyped: Record<string, string> = newErrors as Record<string, string>;
            newErrorsTyped.password = '密码长度至少为6个字符';
            isValid = false;
        }

        setErrors(newErrors);
        return isValid;
    };

    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();

        if (validateForm()) {
            setIsLoading(true);

            // 模拟登录API调用
            setTimeout(() => {
                // 模拟登录成功
                console.log('登录成功:', formData);
                setIsLoading(false);
                navigator("/");
                // 登录成功后的操作，如重定向或存储token
                // alert('登录成功！');
            }, 1500);
        }
    };

    return (
        <Container>
            <Card>
                <CardHeader>
                    <h2>Login in your account</h2>
                </CardHeader>

                <CardBody>
                    <form onSubmit={handleSubmit}>
                        <FormGroup delay={0.1}>
                            <label htmlFor="email">Email</label>
                            <input
                                type="email"
                                id="email"
                                name="email"
                                placeholder="example@mail.com"
                                value={formData.email}
                                onChange={handleChange}
                            />
                            {errors && (errors as Record<string, string>).email && <div className="error-message">{(errors as Record<string, string>).email}</div>}
                        </FormGroup>

                        <FormGroup delay={0.2}>
                            <label htmlFor="password">Password</label>
                            <input
                                type="password"
                                id="password"
                                name="password"
                                placeholder="At least 6 characters"
                                value={formData.password}
                                onChange={handleChange}
                            />
                            {(errors as Record<string, string>).password && <div className="error-message">{(errors as Record<string, string>).password}</div>}
                        </FormGroup>

                        <Button type="submit" disabled={isLoading}>
                            {isLoading ? 'Loading...' : 'Login'}
                        </Button>
                    </form>

                    <ForgotPasswordLink>
                        <a href="#">Forget password</a>
                    </ForgotPasswordLink>

                    <Divider>
                        <span>Or with</span>
                    </Divider>

                    <FormGroup delay={0.3}>
                        <SocialButton>
                            <i className="fa-brands fa-google"></i>
                            使用Google账号登录
                        </SocialButton>
                    </FormGroup>
                    {/*
                    <FormGroup delay={0.4}>
                        <SocialButton>
                            <i className="fa-brands fa-facebook"></i>
                            使用Facebook账号登录
                        </SocialButton>
                    </FormGroup>

                    <RegisterLink>
                        还没有账户？<a href="#">立即注册</a>
                    </RegisterLink> */}
                </CardBody>
            </Card>
        </Container>
    );
};

export default LoginPage;  